<template>
    <view class="userlist">
        <div class="topbackbg">
            <u-image src="../../static/businessImg/back.png" class="backimg" width="16rpx" height="29rpx"
                @click="back"></u-image>
            <div class="topbackname">店铺列表</div>
        </div>

        <div class="userlistsearch">
            <u-search placeholder="输入电话号码或店铺昵称" v-model="keyword" :clearabled="false" @search="handleSearch"
                @custom="handleSearch"></u-search>
        </div>

        <div class="listItem" v-for="item in list" :key="item.id" @click="handlegotouserDetails(item)">
            <div class="listitemavatar"><u-image mode="scaleToFill" :src="item.storeImage" width="161rpx"
                    height="161rpx"></u-image></div>
            <div class="listitemname">{{item.storeName}} 111256165165</div>
            <div class="listitemphone">{{item.storeMobile}}</div>
            <div class="listitemsell">产品数: {{item.productNum}}</div>
            <div class="listitemprice">总金额: {{item.orderPrice}}</div>
            <div class="listitembtn">
                <div class="text" style="padding-right: 9rpx;">查看详情</div>
                <img src="../../static/businessImg/right_arrow_white.png" style="width: 15rpx;height: 26rpx;" alt="">
            </div>
        </div>
    </view>
</template>

<script>

import { saleStoreList } from '@/api/storeAdmin.js'
import storage from "@/utils/storage.js";
export default {
    data() {
        return {
            list: [],
            page: 1,
            pageSize: 10,
            keyword: "",

        }
    },

    onLoad(option) {

    },

    mounted() {
        this.getList()
    },

    onReachBottom() {
        this.page = this.page + 1;
        this.getList()
    },
    methods: {
        back() {
            uni.navigateBack();
        },

        handleSearch() {
            this.page = 1;
            this.list = []
        },
        getList() {
            saleStoreList({
                page: this.page,
                limit: this.pageSize,
                keyword: this.keyword,
                storeId: storage.getUserInfo().storeId,
            }).then(res => {
                this.list = res.data.list
            })
        },
        handlegotouserDetails(obj) {
            uni.navigateTo({
                url: '/pages/gongyingshang/singeStoreData?userDetails=' + encodeURIComponent(JSON.stringify(obj))
            });
        }
    },

}
</script>

<style scoped>
.userlist {
    width: 100%;
    min-height: 100vh;
    background: #F9FAFB;
}

.topbackbg {
    width: 100%;
    height: 188rpx;
    position: relative;
    background: #fff;
}

.backimg {
    position: absolute;
    top: 106rpx;
    left: 32rpx;
    z-index: 1;
}

.topbackname {
    width: 100%;
    height: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 33rpx;
    color: #222222;
    line-height: 32rpx;
    position: absolute;
    text-align: center;
    top: 104rpx;
}

.userlistsearch {

    width: 670rpx;
    margin: 21rpx auto 0;

    .u-search {
        background: rgb(242, 242, 242);
        border-radius: 48rpx;
    }

    .u-action {
        height: 64rpx;
        line-height: 64rpx;
        background: rgb(219, 219, 219);
        border-radius: 0 48rpx 48rpx 0;
        width: 99rpx;
        font-size: 29rpx;
    }
}

.listItem {
    width: 100%;
    background: rgb(245, 245, 245);
    height: 203rpx;
    margin-top: 10rpx;
    box-sizing: border-box;
    padding: 19rpx 40rpx;
    position: relative;
}

.listitemavatar {
    width: 161rpx;
    height: 161rpx;
    position: absolute;

}

.listitemname {
    width: 220rpx;
    height: 31rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 31rpx;
    color: #222122;
    line-height: 31rpx;
    position: absolute;
    top: 24rpx;
    left: 220rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.listitemphone {

    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    top: 88rpx;
    left: 220rpx;
}

.listitemsell {
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 29rpx;
    position: absolute;
    top: 149rpx;
    left: 220rpx;
}

.listitemprice {
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 29rpx;
    position: absolute;
    top: 149rpx;
    left: 407rpx;
}

.listitembtn {
    background: rgb(70, 207, 56);
    width: 180rpx;
    height: 60rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;

    position: absolute;
    top: 20rpx;
    right: 78rpx;
}
</style>
